<template>
  <div>
    <div class="head-container">
      <!-- 搜索 -->
      <el-input clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" />
      <el-date-picker :default-time="['00:00:00', '23:59:59']" type="daterange" range-separator=":" size="small"
        class="date-item" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" />
      <el-button size="small" icon="el-icon-search" type="success">搜索</el-button>
      <el-button size="small" icon="el-icon-refresh-left" type="warning">重置</el-button>
    </div>
    <div class="middle-container">
      <el-row>
        <el-button size="small" class="btn" icon="el-icon-plus" type="primary">新增</el-button>
        <el-button size="small" class="btn" icon="el-icon-edit" type="success">修改</el-button>
        <el-button size="small" class="btn" icon="el-icon-delete" type="danger">删除</el-button>
        <el-button size="small" class="btn" icon="el-icon-download" type="warning">导出</el-button>
      </el-row>
      <el-button-group>
        <el-button icon="el-icon-edit"></el-button>
        <el-button icon="el-icon-share"></el-button>
        <el-button icon="el-icon-delete"></el-button>
      </el-button-group>
    </div>
    <div class="form-container">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'JobManagement',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}

</script>

<style>
.head-container {
  display: flex;
}

.middle-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>